<template>
    <div class="content">
        <div class="ft">
            <div class="wrap">
                <ul class="enter">
                    <li class="unit">
                        <router-link class="logo logo-openplatform"
                            to="https://developer.music.163.com/st/developer"></router-link>
                        <span class="tt">音乐开放平台</span>
                    </li>
                    <li class="unit">
                        <router-link class="logo logo-trade" to="//music.163.com/st/web-sublicense/home"></router-link>
                        <span class="tt">云村交易所</span>
                    </li>
                    <li class="unit">
                        <router-link class="logo logo-xstudio" to="https://xstudio.music.163.com"></router-link>
                        <span class="tt">X StudioAI歌手</span>
                    </li>
                    <li class="unit">
                        <router-link class="logo logo-auth" to="//music.163.com/st/userbasic#/auth"></router-link>
                        <span class="tt">用户认证</span>
                    </li>
                    <li class="unit">
                        <router-link class="logo logo-musician" to="https://tianyin.music.163.com"></router-link>
                        <span class="tt">AI 免费写歌</span>
                    </li>
                    <li class="unit">
                        <router-link class="logo logo-cloudsong" to="https://music.163.com/st/ad-song"></router-link>
                        <span class="tt">云推歌</span>
                    </li>
                    <li class="unit">
                        <router-link class="logo logo-reward" to="//music.163.com/web/reward"></router-link>
                        <span class="tt">赞赏</span>
                    </li>
                </ul>
                <div class="copy">
                    <p class="link">
                        <router-link to="//st.music.163.com/official-terms/service" class="item">服务条款</router-link>
                        <span class="line">|</span>
                        <router-link to="//st.music.163.com/official-terms/privacy" class="item">隐私政策</router-link>
                        <span class="line">|</span>
                        <router-link to="//st.music.163.com/official-terms/children" class="item">儿童隐私政策</router-link>
                        <span class="line">|</span>
                        <router-link to="//music.163.com/st/staticdeal/complaints.html" class="item">版权投诉</router-link>
                        <span class="line">|</span>
                        <router-link to="http://ir.music.163.com" class="item">投资者关系</router-link>
                        <span class="line">|</span>
                        <router-link to="https://music.163.com/ui/resource" class="item">广告合作</router-link>
                        <span class="line">|</span>
                        <router-link
                            to="//mp.music.163.com/600948c936c13f4d09752e73/contact-us-web/index.html?source=Music-Main-Station"
                            class="item">联系我们
                        </router-link>
                    </p>
                    <p class="right">
                        <router-link style="margin-right: 14px;" to="https://jubao.163.com"
                            class="alink">廉正举报</router-link>
                        <span class="sep span">不良信息举报邮箱: gangyiyun.com</span>
                        <span class="span">客服热线：996644332</span>
                    </p>
                    <p class="right">
                        <span class="span">互联网宗教信息服务许可证：桂（2025）0000120</span>
                        <span class="span">增值电信业务经营许可证：桂B2-20250518</span>
                        <router-link to="https://beian.miit.gov.cn/#/Integrated/index"
                            class="alink ">桂B2-20250518-18&nbsp;&nbsp;浙ICP备15001234号-4&nbsp;&nbsp;工业和信息化部备案管理系统网站
                        </router-link>
                    </p>
                    <p class="right">
                        <span class="sep">冈易公司版权所有©1997-2025</span>
                        <span class="span">327宿舍科技有限公司运营：</span>
                        <router-link
                            to="https://p6.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/34942157981/2e30/30c1/ad1f/7be053a28e91dd8bafe49bdf6455cb2a.png"
                            class="alink">桂网文[2025] 6666-007号
                        </router-link>
                        <router-link to="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010902002564"
                            class="alink">
                            <span class="police-logo"></span>
                            <span class="police-text">桂公网安备 1008611号</span>
                        </router-link>
                        <router-link to="https://y.music.163.com/m/at/661f2af6e36f7c50ead8994b" class="alink">
                            <span class="police-text">算法服务公示信息</span>
                        </router-link>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import router from '../router';
</script>

<style lang="scss" scoped>
.content {
    position: relative;
    height: 325px;
    overflow: hidden;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;

    .ft {
        width: 980px;
        margin: 0 auto;

        .wrap {

            .enter {
                display: flex;
                flex-direction: row;
                justify-content: center;
                margin-top: 33px;

                .unit {
                    width: 45px;
                    margin-left: 80px;
                    text-align: center;
                    color: #666;

                    .logo {
                        display: block;
                        float: none;
                        width: 45px;
                        height: 45px;
                        margin: 0 auto;
                        background: url(../assets/Footer/foot_enter_new2.png) no-repeat;
                        background-size: 220px 220px;
                    }

                    .logo-openplatform {
                        background-position: -170px -5px;

                        &:hover {
                            background-position: -5px -115px;
                        }
                    }

                    .logo-trade {
                        background-position: -5px -170px;

                        &:hover {
                            background-position: -60px -170px;
                        }
                    }

                    .logo-xstudio {
                        background-image: url('/src/assets/Footer/xStudio.png');
                        background-size: 45px;

                        &:hover {
                            background-image: url('/src/assets/Footer/xStudioHover.png');
                        }
                    }

                    .logo-auth {
                        background-position: -60px -60px;

                        &:hover {
                            background-position: -115px -5px;
                        }
                    }

                    .logo-musician {
                        background-image: url('/src/assets/Footer/aiLogo.png');
                        background-size: 45px;

                        &:hover {
                            background-image: url('/src/assets/Footer/aiLogoHover.png');
                        }
                    }

                    .logo-cloudsong {
                        background-image: url('/src/assets/Footer/cloudSong.png');
                        background-size: 45px;

                        &:hover {
                            background-image: url('/src/assets/Footer/cloudSongHover.png');
                        }
                    }

                    .logo-reward {
                        background-position: -170px -115px;

                        &:hover {
                            background-position: -60px -115px;
                        }
                    }

                    .tt {
                        display: inline-block;
                        width: 100px;
                        margin-top: 10px;
                        margin-left: -27.5px;
                        font-weight: 400;
                        font-size: 12px;
                        text-align: center;
                        color: rgba(0, 0, 0, 0.5);
                    }
                }

                .unit:first-child {
                    margin-left: 0;
                }
            }

            .copy {
                padding-top: 60px;
                line-height: 24px;
                margin: 0 auto;
                text-align: center;

                .link {

                    .item {
                        color: #666;
                        cursor: pointer;

                        &:hover {
                            text-decoration: underline;
                        }
                    }

                    .line {
                        margin: 0 8px 0 8px;
                        color: #D9D9D9;
                    }
                }

                .right {
                    color: #666;

                    .alink {
                        color: #666;
                        cursor: pointer;
                    }

                    .police-logo {
                        width: 14px;
                        height: 14px;
                        background: url('/src/assets/Footer/police.png') no-repeat;
                        background-size: cover;
                        display: inline-block;
                        margin-right: 2px;
                        vertical-align: -2px;
                    }

                    .sep {
                        margin-right: 14px;
                        cursor: pointer;
                    }

                    .span {
                        color: #666;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
</style>
